<template>
  <!--自动站单站报表-->
  <div class="single-station-report-page">
    <div class="analysis-object-tree-warp">
      <water-radio-tree @getCheckedNodes = 'getSiteCheckedNodes'></water-radio-tree>
    </div>
    <div class="secondary-page-mode" style="width: calc(100% - 232px);float: right;height: 100%;">
      <div class="secondary-toolbar">
        <span>时间段：</span>
        <div class="layoutBox" style="width:125px">
          <el-date-picker
            v-model = "dataValue"
            type="month"
            placeholder="选择时间">
          </el-date-picker>
        </div>&emsp;
        <el-button @click="historicalDataSearch"><i class="iconfont icon-sousuo"></i>生成</el-button>
        <el-button type='delet' @click="exportData"><i class="iconfont icon-daochu"></i>导出</el-button>
      </div>
      <div class="currency-mode-wrap">

        <el-scrollbar class="currency-mode-scroll">
          <h4 class="report-form-title">{{headtitle}}</h4>
          <div class="report-table-wrap" style="position: relative;">
            <div v-if="reportLoading" class="loading-wrap"></div>
            <div v-if="reportNoDataState" class="no-data-wrap small no-data-table">
              <p>暂无数据</p>
            </div>
            <el-table
              :data="tableData"
              border
              empty-text=" "
              style="width: 100%">
              <el-table-column
                type="index"
                label="序号"
                fixed
                width="50">
              </el-table-column>
              <el-table-column
                prop="name"
                label="站点"
                fixed
                :show-overflow-tooltip = 'true'
                width="230">
              </el-table-column>
              <el-table-column
                prop="primaryPollutant"
                label="主要污染物"
                fixed
                :show-overflow-tooltip = 'true'
                width="130">
              </el-table-column>
              <el-table-column
                     v-for="(item,index) in headcolumn"
                     :key="index"
                     :width="setWidth(item.projectName)"
                     :label="item.projectName"
                     :property="item.projectCode">
                <template slot-scope="scope">
                  <div class="data-table-cell"
                       :key="index"
                       v-for="(proj,index) in scope.row.projects">
                       <span v-if="proj.code == item.projectCode">{{ proj.value}}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="waterQualityIndex"
                width="150"
                label="断面综合指数（PⅢ）">
              </el-table-column>
              <el-table-column
                prop="evaluation"
                width="106"
                label="水质定性评价">
              </el-table-column>
            </el-table>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
  import waterRadioTree from '@/components/waterRadioTree'
  import {formatDate} from '../../assets/js/dateformat'

  let pickerOptions = {
    shortcuts: [{
      text: '最近一周',
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        picker.$emit('pick', [start, end]);
      }
    }, {
      text: '最近一个月',
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        picker.$emit('pick', [start, end]);
      }
    }, {
      text: '最近三个月',
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        picker.$emit('pick', [start, end]);
      }
    }]
  };
  let tableData = [];

  let headcolumn={
    enabled:1,
    metal:0,
    projectCode:"w01018",
    projectId:187,
    projectName:"COD",
    projectType:"428F3127A91D467CA8F1EA2749CC087E",
    projectUnit:"mg/L",
    scale:2
  };
  export default {
    name: "waterQualityBulletin",
    data(){
      return {
        reportLoading: true,
        reportNoDataState: false,
        pickerOptions,//时间快捷菜单数据
        dataValue:'',//时间绑定数据
        tableData,//表格数据
        headtitle:'',
        headcolumn
      }
    },
    methods:{
      setWidth(code){
        if(code){
          let num = code.length;
          return (num*14+20)>104?num*14+20:104;
        }
      },
      getSiteCheckedNodes(nodes){
        this.siteChecked = nodes;
        this.openPage = nodes.structureType;
        this.historicalDataSearch();
      },
      initTime(){
        this.dataValue=new Date();
      },
      searchcolumn(){
        /* 基本信息请求 */
        var paramsp={
          equipIds: this.siteChecked.id.toString(),
        };
        if(this.siteChecked.structureType=='area'){
          paramsp={
            areaIds: this.siteChecked.id.toString()
          };
        }else if(this.siteChecked.structureType=='river'){
          paramsp={
            riverIds: this.siteChecked.id.toString()
          };
        }
        this.$http.get('/waterenvapi/basic/stationRefProjects',{
          params:paramsp
        }).then((response)=>{
          let dataJson = response.data;
          if(dataJson.code === 200){
            this.headcolumn = dataJson.content.dataList;
          }
        }).catch((error)=>{

        });
      },
      checksiteinit(){
        let self=this;
        let aa=0;
        let timer=setInterval(function(){
          if(self.siteChecked){
            self.historicalDataSearch();
            clearInterval(timer);
          }
          aa++;
          if(aa>5){
            clearInterval(timer);
          }
        },100);
      },
      convertDateFromString(dateString){
        if (dateString) {
          var date = new Date(dateString.replace(/-/,"/"))
          return date;
        }
      },
      initTitle(){
        var startTime=formatDate(this.dataValue,'yyyy-MM');
        var node=this.siteChecked;
        this.headtitle=node.label+'地表水'+startTime+'月报';
      },
      exportData(){
        var statisType='month';
        var startTime=formatDate(this.dataValue,'yyyy-MM-01 00:00:00');
        var date=this.convertDateFromString(startTime);     
        date.setMonth(date.getMonth()+1);
        var endTime=formatDate(date,'yyyy-MM-01 00:00:00');
        if(this.siteChecked.structureType=='area'){
          window.open("/waterenvapi/report/autoStationMuiltiDbszgbExport?queryType=station&areaIds="+this.siteChecked.id.toString()+'&statisType='+statisType+'&startTime='+startTime+'&endTime='+endTime);  
        }else if(this.siteChecked.structureType=='river'){
          window.open("/waterenvapi/report/autoStationMuiltiDbszgbExport?queryType=station&riverIds="+this.siteChecked.id.toString()+'&statisType='+statisType+'&startTime='+startTime+'&endTime='+endTime);    
        }else{
          window.open("/waterenvapi/report/autoStationMuiltiDbszgbExport?queryType=station&equipdIds="+this.siteChecked.id.toString()+'&statisType='+statisType+'&startTime='+startTime+'&endTime='+endTime)
        }
      },
      historicalDataSearch(){
        this.reportLoading = true;
        this.reportNoDataState = false;
        this.searchcolumn();
        this.initTitle();
        var statisType='month';
        var startTime=formatDate(this.dataValue,'yyyy-MM-01 00:00:00');
        var date=this.convertDateFromString(startTime);     
        date.setMonth(date.getMonth()+1);
        var endTime=formatDate(date,'yyyy-MM-01 00:00:00');
        var paramsp={
          equipdIds: this.siteChecked.id.toString(),
          statisType:statisType,
          startTime:startTime,
          endTime:endTime,
          queryType:'station'
        };
        if(this.siteChecked.structureType=='area'){
          paramsp={
            areaIds: this.siteChecked.id.toString(),
            statisType:statisType,
            startTime:startTime,
            endTime:endTime,
            queryType:'station'
          };
        }else if(this.siteChecked.structureType=='river'){
          paramsp={
            riverIds: this.siteChecked.id.toString(),
            statisType:statisType,
            startTime:startTime,
            endTime:endTime,
            queryType:'station'
          };
        }
        this.$http.get('/waterenvapi/report/autoStationMuiltiReport',{
          params:paramsp
        }).then((response)=>{
          let dataJson = response.data;
          if(dataJson.code === 200){
            this.tableData = dataJson.content.dataList;
            this.total=dataJson.content.total;
            if(dataJson.content.dataList.length === 0){
              this.reportNoDataState = true;
            }else{
              this.reportNoDataState = false;
            }
          }
          this.reportLoading = false;
        }).catch((error)=>{
          this.reportLoading = false;
          this.reportNoDataState = true;
        });
      }
    },
    mounted(){
      this.initTime();
      this.checksiteinit();
    },
    created(){
        this.$store.commit("setShowlefttree", false);
    },
    components:{
      waterRadioTree
    }
  }
</script>

<style scoped lang="less">
  .single-station-report-page{
    height: 100%;
    .currency-mode-wrap{
      height: calc(100% - 56px);
    }
    .currency-mode-scroll{
      height: 100%;
    }
    .report-form-title{
      height: 28px;
      line-height: 28px;
      font-size: 16px;
      text-align: center;
      margin-top: 12px;
    }
    .report-form-subtitle{
      text-align: center;
      line-height: 24px;
    }
    .report-table-wrap{
      padding: 10px 34px 0;
    }
    .majorPollutants{

    }
  }
</style>
